<template>
  <!-- 购物车信息展示组件 -->
  <el-card class="table-data-card">
    <Table
      :columns="columns"
      :fetch="loadDataList"
      :dataSource="tableData"
      :options="tableOptions"
      @rowSelected="handleRowSelected"
      :selected="selectedHandler"
    >
      <template #slotImage="{ row }">
        <el-image :src="row.image" fit="scale-down" style="width: 80px">
          <template #error>
            <div class="iconfont icon-shangpin"></div>
          </template>
        </el-image>
      </template>
      <template #slotPrice="{ row }">
        <!-- 分->元 -->
        <span>{{ row.price / 100 }}</span>
      </template>
    </Table>
  </el-card>
  <el-card>
    <div v-if="selectedRows && selectedRows.length > 0">
      <el-button
        type="primary"
        @click="submit"
        style="float: right"
        size="large"
        >结算</el-button
      >
      <el-button type="danger" @click="del" style="float: right" size="large"
        >删除</el-button
      >
    </div>
  </el-card>
  <OrderDetailDialog ref="orderDetailDialogRef" @reload="loadDataList" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const selectedRows = ref([]);

/* table组件emit的复选信息变化回调函数，返回当前选中的行 */
const handleRowSelected = (rows) => {
  selectedRows.value = rows;
};

/* 返回table组件哪些行可以被选中的函数，这里都可以选 */
const selectedHandler = (row, index) => {
  return true;
};

import OrderDetailDialog from "@/components/OrderDetailDialog.vue";
const orderDetailDialogRef = ref(null);

const submit = async () => {
  orderDetailDialogRef.value.show({ details: selectedRows.value });
};

const del = async () => {
  proxy.Confirm({
    message: "确定删除吗？",
    okFun: async () => {
      const ids = selectedRows.value.map((item) => item.itemId);
      let result = await proxy.Request({
        method: "delete",
        url: proxy.Api.deleteCartItems,
        params: {
          ids: ids.join(","),
        },
      });
      if (!result) {
        return;
      }
      proxy.Message.success("删除成功！");
      loadDataList();
    },
  });
};

const tableData = ref({
  pageNo: 1,
  pageSize: 15,
});
const tableOptions = {
  selectType: "checkbox",
};
const searchForm = ref({});

const loadDataList = async () => {
  let result = await proxy.Request({
    url: proxy.Api.queryMyCarts,
  });
  if (!result) {
    return;
  }
  Object.assign(tableData.value, result);
  tableData.value.totalCount = result.data.length;
};

const columns = [
  {
    label: "图片",
    prop: "image",
    scopedSlots: "slotImage",
    width: 120,
  },
  {
    label: "名称",
    prop: "name",
    width: 700,
  },
  {
    label: "价格(元)",
    prop: "price",
    scopedSlots: "slotPrice",
  },
  {
    label: "数量",
    prop: "num",
  },
];
</script>

<style lang="scss" scoped>
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
